
<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>UI预览 - 右侧信息面板与工具栏控件</title>
    <style>
      body{font-family:system-ui,Segoe UI,Helvetica,Arial; margin:20px;}
      img{max-width:100%; border:1px solid #ccc;}
      .desc{color:#555; margin-bottom:12px;}
      .toolbar{display:flex; align-items:center; gap:12px; padding:10px; border:1px solid #ddd; border-radius:8px; margin:14px 0;}
      .toolbar .spacer{flex:1;}
      .checkbox-group label{margin-right:8px;}
      .panel{display:grid; grid-template-columns: 1fr 420px; gap:18px;}
      .panel .right{border:1px solid #eee; padding:10px; border-radius:6px;}
      .right h3{margin:0 0 8px 0;}
    </style>
  </head>
  <body>
    <h2>右侧信息面板预览</h2>
    <div class="desc">左侧为原始图像，右侧为新增面板显示角度、开合度与指令日志。下面演示了在 ttk 界面中新增的工具栏控件（复位与屏蔽节点）。</div>

    <div class="toolbar">
      <button>复位</button>
      <div class="checkbox-group">
        <strong>屏蔽节点:</strong>
        <label><input type="checkbox" /> 抓夹</label>
        <label><input type="checkbox" /> 肩</label>
        <label><input type="checkbox" /> 肘</label>
        <label><input type="checkbox" /> 腕</label>
      </div>
      <div class="spacer"></div>
      <label><input type="checkbox" checked /> 控制发送</label>
    </div>

    <div class="panel">
      <div class="left">
        <img src="ui_panel_preview.jpg" alt="UI预览" />
      </div>
      <div class="right">
        <h3>角度与开合</h3>
        <div>右肩角度: 42.3°</div>
        <div>右肘角度: 58.7°</div>
        <div>右腕角度: 15.2°</div>
        <div>右手张开度: 63.5%</div>
        <hr />
        <h3>控制参数</h3>
        <div>死区% <input type="range" min="0" max="10" value="2" /></div>
        <div>平滑α <input type="range" min="0" max="1" step="0.01" value="0.3" /></div>
        <div>最大步% <input type="range" min="0.5" max="20" step="0.5" value="5" /></div>
        <div>相对阈% <input type="range" min="0" max="20" value="5" /></div>
        <div>相对步% <input type="range" min="0.5" max="20" step="0.5" value="5" /></div>
        <div>中心% <input type="range" min="0" max="100" value="50" /></div>
        <div>缩小系数 <input type="range" min="0" max="1" step="0.01" value="0.2" /></div>
        <h3>上下限(%)</h3>
        <div>抓夹 min <input type="range" min="0" max="100" value="0" /> max <input type="range" min="0" max="100" value="100" /></div>
        <div>肩 min <input type="range" min="0" max="100" value="0" /> max <input type="range" min="0" max="100" value="100" /></div>
        <div>肘 min <input type="range" min="0" max="100" value="0" /> max <input type="range" min="0" max="100" value="100" /></div>
        <div>腕 min <input type="range" min="0" max="100" value="0" /> max <input type="range" min="0" max="100" value="100" /></div>
        <hr />
        <h3>指令控制日志</h3>
        <div>12:01:03 | OK | 2:35.0 3:47.5 4:22.0 1:78.0</div>
        <div>12:01:04 | OK | 2:35.5 3:48.0 4:22.5 1:78.0</div>
        <div>12:01:05 | OK | 2:36.0 3:48.5 4:23.0 1:78.5</div>
      </div>
    </div>
  </body>
</html>
